<template>
  <a-drawer
    title="分配"
    width="90%"
    :visible="visible"
    @close="
      () => {
        this.visible = false
      }
    "
  >
    <a-card :bordered="false">
      <div>
        分组名称 :
        <a-input disabled v-model="MergeName" style="width:300px" autocomplete="off" />
      </div>
      <!-- id="transfer"
        @scroll="scrollFn" -->
      <a-transfer
        :disabled="disabled"
        style="margin-top: 8px"
        show-search
        :filter-option="filterOption"
        :list-style="{
          width: '640px',
          height: '550px'
        }"
        :data-source="mockData"
        :target-keys="targetKeys"
        :render="item => item.title"
        @change="TargetKeysChange"
      >
      </a-transfer>
    </a-card>
    <div style="height: 50px"></div>
    <div
      :style="{
        position: 'absolute',
        right: 0,
        bottom: 0,
        width: '100%',
        borderTop: '1px solid #e9e9e9',
        padding: '10px 16px',
        background: '#fff',
        textAlign: 'right',
        zIndex: 1
      }"
    >
      <a-button @click="visible = false">取消</a-button>&nbsp;&nbsp;
      <a-button type="primary" :loading="btnLoading" @click="handleSubmit">保存</a-button>
    </div>
  </a-drawer>
</template>

<script>
export default {
  data() {
    return {
      disabled: false,
      btnLoading: false,

      User: [],
      visible: false,
      MergeName: '',
      Sort: '',
      UserGrouping: [],
      entity: {},
      GroupId: '',
      DepartmentIdTreeData: [],
      show: false,
      targetKeys: [],
      mockData: [],
      pagination: {
        current: 1,
        pageSize: 100,
        total: null
      },
      Type: '1',
      layout: {
        labelCol: { span: 5 },
        wrapperCol: { span: 18 }
      },
      SalesmanType: ''
    }
  },
  mounted() {
    this.$http.post('/Base_Manage/Base_Department/GetTreeDataList', {}).then(resJson => {
      if (resJson.Success) {
        this.DepartmentIdTreeData = resJson.Data
      }
    })
  },
  methods: {
    handleSubmit() {
      this.btnLoading = true
      if (!this.GroupId) return this.$message.error('请选择分组')
      var entityData = {}

      entityData.IMMId = this.GroupId
      entityData.MergeName = this.MergeName

      let arr = this.targetKeys.reduce((pre, cur) => {
        let idx = this.mockData.findIndex(im => im.key == cur)

        pre.push(this.mockData[idx])
        return pre
      }, [])

      arr = arr.map(item => ({ cInvName: item.cInvName, cInvCode: item.cInvCode, IMMId: this.GroupId }))

      entityData.InvMergeDetailsList = arr

      this.$http.post('/ProductManagement/InventoryMergeDetails/SaveData', entityData).then(resJson => {
        if (resJson.Success) {
          this.$message.success('操作成功!')
          this.visible = false
          this.targetKeys = []
        } else {
          this.$message.error(resJson.Msg)
        }
        setTimeout(() => {
          this.btnLoading = false
        }, 500)
      })
    },

    GroupChange(e) {
      this.GroupId = e
      var id = this.UserGrouping.findIndex(item => item.Id == e)
      if (id !== -1) {
        this.MergeName = this.UserGrouping[id].DicName
      }

      if (this.GroupId) {
        this.$http
          .post('/CustomerManagement/CustomerInfo/GetDataListByMoreConditionOfFormal', {
            Search: [
              {
                Condition: 'GroupId',
                Keyword: this.GroupId
              }
            ]
          })
          .then(resJson => {
            if (resJson.Success) {
              this.targetKeys = resJson.Data.map(item => {
                return item.Id
              })
            } else {
              this.$message.error(resJson.Msg)
            }
          })
      }
    },

    init() {
      this.pagination = {
        current: 1,
        pageSize: 100,
        total: null
      }
      // 获取组织
      this.GroupId = ''
      this.MergeName = ''
      this.mockData = []
      this.getmockDataList()
      this.btnLoading = false

      this.user = []
      this.targetKeys = []
    },
    openForm(row) {
      this.init()
      this.visible = true
      this.MergeName = row.MergeName
      this.GroupId = row.Id
      this.$http
        .post('/ProductManagement/InventoryMergeDetails/GetDataListByMoreCondition', {
          Search: [
            {
              Condition: 'IMMId',
              Keyword: row.Id
            }
          ]
        })
        .then(resJson => {
          if (resJson.Success) {
            this.targetKeys = resJson.Data.map(item => {
              return item.cInvCode
            })
          }
        })
    },
    // Department(e) {
    //   this.UserList(e)
    // },
    // UserList(e) {
    //   this.$http.post('/Base_Manage/Base_User/GetDataListAsyncByDeptId?DeptId=' + e).then(resJson => {
    //     if (resJson.Success) {
    //       this.User = resJson.Data
    //     }
    //   })
    // },
    // 分配
    TargetKeysChange(targetKeys, direction, moveKeys) {
      this.targetKeys = targetKeys
    },
    filterOption(inputValue, option) {
      return option.title.indexOf(inputValue) > -1
    },
    getmockDataList() {
      this.$http.post('/ProductManagement/Inventory/GetDataList', {
          PageIndex: this.pagination.current,
          PageRows: this.pagination.pageSize,
      }).then(resJson => {
        if (resJson.Success) {
          let arr = resJson.Data
          this.pagination.total = resJson.Total
          // 获取不到最新数据或已全部加载时停止继续加载
          if (arr.length <= 0 || this.mockData.length >= resJson.Total) {
            return
          }
          arr.forEach(item => {
            item.title = `${item.cInvName}__规格型号:${item.cInvStd||'无'}`

            item.key = item.cInvCode
          })

          this.mockData = this.mockData.concat(arr)
          // // 继续获取数据
          this.pagination.current++
          this.getmockDataList()
        }
      })
    }
  }
}
</script>

<style scoped>
.Mbottom {
  margin-bottom: 8px;
}
.weight {
  font-weight: bold;
}
</style>
